<template>
    <div class="right">
        <el-drawer title="选择头像" :visible.sync="is_drawer" :before-close="handleClose">
            <!--            <div class="demo-fit">-->
            <!--            <div v-for="url in urls">-->
            <!--                <div class="block"  @click="choice(url)" >-->
            <!--                    <el-avatar shape="square" :size="50" class="url" :src="url"></el-avatar>-->
            <!--                </div>-->
            <!--            </div>-->

            <div class="form-group">
                <label for="myfile">头像
                    <img src="http://127.0.0.1:8000/media/icon/default.png" alt="头像" style="padding-left: 10px"
                         width="120px" height="120px" id="myimg">
                </label>
                <input type="file" name="avatar" id="myfile" @change="change_avator($event)" style="display: none">
                <div class="bottom">
                    <el-button type="success" icon="el-icon-check" @click="send" circle></el-button>
                </div>
            </div>
            <!--                        </div>-->

        </el-drawer>
    </div>
</template>

<script>
    export default {
        name: "Right",
        props: ['is_drawer'],
        data() {
            return {
                urls: [],
                dialogImageUrl: '',
                dialogVisible: false,
                // avator: 'http://127.0.0.1:8000/media/icon/default.png'
                //border: 1px solid red
                // my_style: "margin-left: 10px;margin-top: 10px;float: left;"
            }
        },
        methods: {
            handleClose(done) {
                this.$emit('right_close')
                this.$confirm('确认关闭？')
                    .then(_ => {

                        done();
                    })
                    .catch(_ => {
                    });
            },
            change_avator(e) {
                let myFileReaderObj = new FileReader();
                // let fileobj = $(this)[0].files[0];
                this.avator = e.target.files[0]
                // console.log(e.target.files[0].name)
                myFileReaderObj.readAsDataURL(this.avator);
                myFileReaderObj.onload = function () {
                    $('#myimg').attr('src', myFileReaderObj.result)
                }
            },
            send() {
                let formData_obj = new FormData();
                formData_obj.append('username', this.$cookies.get('username'))
                formData_obj.append('avator', $('#myfile')[0].files[0]);
                this.$axios.post('http://127.0.0.1:8000/user/accept/', formData_obj).then(response => {
                    this.$cookies.set('avator', this.$settings.base_url+"/media/"+response.data.avator, '7d')
                    // this.$emit('change_icon')

                }).catch(error => {
                })
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            // choice(v) {
            //     // console.log(666)
            //     console.log(v)
            //     let url = document.getElementById(v)
            //     // console.log(url)
            //     url.style.border = 'border: 1px solid red'
            //
            //     // this.my_style += 'border: 1px solid red'
            //     // console.log(this.my_style)
            //
            // }
        },
        created() {
            // this.$axios.get('http://127.0.0.1:8000/user/get_avator/').then(response => {
            //     for (let i = 0; i < response.data.length; i++) {
            //         this.urls.push(response.data[i])
            //     }
            // }).catch(error => {
            // })
        },
        mounted() {

        }
    }
</script>

<style scoped>
    .bottom {
        position: absolute;
        bottom: 450px;
        right: 200px;
    }

    input[type=file] {
        display: none;
    }

    .el-upload__input {
        display: none;
    }

    #url {
        margin-left: 10px;
        margin-top: 10px;
        float: left;
        display: block
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .el-upload--picture-card {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 3px;
        box-sizing: border-box;
        width: 58px;
        height: 58px;
        line-height: 70px;
        vertical-align: top;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>